<template>
  <div class="homeContent">
    <div class="homeHeader">
      <van-tabs v-model:active="searchData.state" type="card" @click-tab="changeTab">
        <van-tab :title="item.text" :name="item.value" v-for="(item, index) in columns" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div class="cardList">
      <van-pull-refresh v-model="refreshing" @refresh="onLoad('refresh')">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            class="listItem"
            v-for="(item, index) in listCard"
            :key="index"
            @click="cardClick(item)"
          >
            <template #default>
              <div class="header">
                <div
                  class="left"
                  :style="{
                    background:
                      item.level == 3
                        ? '#07c160'
                        : item.level == 1
                        ? '#de2a26'
                        : '#ff976a',
                  }"
                >
                  {{
                    item.level == 3
                      ? "低风险"
                      : item.level == 2
                      ? "中风险"
                      : item.level == 1
                      ? "高风险"
                      : "-"
                  }}
                </div>
                <div
                  class="right examine"
                  style="margin-left: 10px;"
                  v-if="item.isDrill == 1"
                >演练</div>
                <div
                  class="right red"
                  style="margin-left: 10px;"
                  v-if="item.workType == 2"
                >增援</div>
                <div style="flex: 1"></div>
                <div
                  class="right"
                  :class="
                    item.state == 3
                      ? 'active'
                      : item.state == 2
                      ? 'examine'
                      : ''
                  "
                >
                  {{
                    item.state == 0
                      ? "未到场"
                      : item.state == 1
                      ? "处置中"
                      : item.state == 2
                      ? "待审核"
                      : item.state == 3
                      ? "已办结"
                      : "-"
                  }}
                </div>
              </div>
              <div class="title">
                {{ item.riskPoint || "-" }}
              </div>
              <div class="content">
                {{ item.describe || "-" }}
              </div>
              <div class="time">
                {{
                  item.accumulatedWaterStartTime
                    ? new Date(item.accumulatedWaterStartTime).toLocaleString()
                    : "-"
                }}
              </div>
            </template>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getDisposeList } from "@/api/index.js";

const router = useRouter();
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const listCard = ref([]);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 20
}); 
const searchData = reactive({
  state: 0
});
const pages = ref(0);
onMounted(() => {
  getList();
});

const columns = [
  { text: "未到场", value: 0 },
  { text: "处置中", value: 1 },
  { text: "待审核", value: 2 },
  { text: "已办结", value: 3 },
];
const onLoad = (type: string = "") => {
  if (type === "refresh") {
    finished.value = false;
    loading.value = true;
  }

  if (refreshing.value || type === "refresh") {
    pages.value = 0;
    queryParams.pageNum = 1;
    listCard.value = [];
    refreshing.value = false;
  }

  if (type !==  "refresh") {
    if (queryParams.pageNum >= pages.value) return
    queryParams.pageNum++
  }
  getList();
};

const getList = () => {
  loading.value = true;
  getDisposeList(queryParams, searchData)
    .then((res) => {
      if (res.data && res.data.code == 200) {
        pages.value = Math.ceil(res.data.total/queryParams.pageSize)

        let data = res.data.rows || []
        if (queryParams.pageSize == 1) {
          listCard.value = data
        } else {
          listCard.value = listCard.value.concat(data)
        }

        if (queryParams.pageNum == pages.value || pages.value == 0) {
          finished.value = true;
        }
      } else {
        finished.value = true;
      }
    })
    .catch((err) => {
      finished.value = true;
    })
    .finally(() => {
      loading.value = false;
    });
};

const changeTab = (v) => {
  const { name } = v;
  searchData.state = name;
  onLoad('refresh');
};
const cardClick = (props) => {
  router.push({
    path: "/detail",
    query: {
      status: props.state,
      id: props.id,
      // data: JSON.stringify(props),
    },
  });
};
</script>

<style scoped lang="less">
.homeContent {
  background: #f7f8f7;
  text-align: center;
  padding: 0 6px;
  height: 100%;
  .homeHeader {
    margin-top: 10px;
  }
  .cardList {
    margin: 10px 0;
    height: calc(100% - 80px);
    overflow-y: auto;
  }
  .listItem {
    background: #fff;
    padding: 1px;
    border-radius: 10px;
    margin-bottom: 10px;
    .header {
      display: flex;
      // justify-content: space-between;
      .left {
        padding: 2px 16px;
        background: #1989fa;
        color: #fff;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
      }
      .right {
        padding: 2px 6px;
        color: #ee7e34;
        border: 1px solid #ee7e34;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      .examine {
        color: #07c160;
        border: 1px solid #07c160;
      }
      .red {
        color: #de2a26;
        border: 1px solid #de2a26;
      }
      .active {
        color: #1989fa;
        border: 1px solid #1989fa;
      }
    }
    .title {
      color: #000;
      font-size: 14px;
      text-align: left;
      margin: 6px 10px;
    }
    .content {
      color: #c4c4c4;
      font-size: 12px;
      margin: 0 10px;
      text-align: left;
    }
    .time {
      color: #c4c4c4;
      font-size: 12px;
      text-align: right;
      margin: 5px 10px;
    }
  }
}
</style>
